/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet,Text, View, Image, TouchableOpacity, PixelRatio} from 'react-native';

import Common from '../../component/common';

import ToolbarComponent from '../../component/ToolbarComponent';

import styles from '../../style/media';

import IndustryMediaList from './industryMediaList';

import LoadError from '../../component/loadError';

import Loading from '../../component/loading';

export default class MoreIndustryMedia extends Component {
  constructor(props) {
    super(props);
    this.state = {
      today: true,
      yesterday: false,
      week: false,
      history: false,
      currentStatus: "today",
      list: [],
      loading: true,
      success: false,
      errorMessage: '',
    };
    this.todayList = {};
    this.yesterdayList = {};
    this.weekList = {};
    this.historyList = {};
  }
  componentWillMount(){
    if(this.props.name){
      this.switchTab(this.props.name);
    }
  }
  fetchData = (type, callBack) => {
    let formData = new FormData();
    formData.append("id", this.props.did.programId);
    formData.append("type", type);
    Common.fetchData("post", "/billboard/detailExtra", formData, (responseData) => {
      callBack(responseData);
    },() => {
      this.setState({
        loading: false,
        success: false,
        errorMessage: "请求失败",
      });
    },() => {
      this.setState({
        loading: false,
        success: false,
        errorMessage: "网络错误",
      });
    });
  };
  switchTab = (tabName) => {
    this.setState({
      loading: true,
      success: false,
      errorMessage: '',
    });
    switch (tabName){
        case "today":
          //请求数据的列表
          this.setState({
            today: true,
            yesterday: false,
            week: false,
            history: false,
            currentStatus: "today",
          });
          // if(!this.todayList.mmNewsList){
            //请求数据的列表 即this.hoursPosList = ?
            // https://api.media-plus.cn/billboard/detailExtra
            this.fetchData(0,(responseData) => {
              this.todayList = {mmNewsList: responseData.entity.resultList};
              this.setState({
                loading: false,
                success: true,
                list: this.todayList,
              })

            });
          // }else{
          //   this.setState({
          //       loading: false,
          //       success: true,
          //       today: true,
          //       yesterday: false,
          //       week: false,
          //       history: false,
          //       currentStatus: "today",
          //       list: this.todayList,
          //   });
          // }

          // }

          // this.setState({ 
          //   today: true,
          //   yesterday: false,
          //   week: false,
          //   history: false,
          //   currentStatus: "today",
          //   list: this.todayList,
          // });
          break;
        case "yesterday":
          this.setState({
            today: false,
            yesterday: true,
            week: false,
            history: false,
            currentStatus: "yesterday",
          });
          // if(!this.yesterdayList.mmNewsList){
            //请求数据的列表 即this.hoursPosList = ?
            // https://api.media-plus.cn/billboard/detailExtra
            this.fetchData(-1,(responseData) => {
              this.yesterdayList = {mmNewsList: responseData.entity.resultList};
              this.setState({
                loading: false,
                success: true,
                list: this.yesterdayList,
              })

            });
          // }else{
          //   this.setState({
          //     loading: false,
          //     success: true,
          //     today: false,
          //     yesterday: true,
          //     week: false,
          //     history: false,
          //     currentStatus: "yesterday",
          //     list: this.yesterdayList,
          //   })
          // }
          break;
        case "week":
          this.setState({
            today: false,
            yesterday: false,
            week: true,
            history: false,
            currentStatus: "week",
          });
          // if(!this.weekList.mmNewsList){
            //请求数据的列表 即this.hoursPosList = ?
            // https://api.media-plus.cn/billboard/detailExtra
            this.fetchData(-7,(responseData) => {
              this.weekList = {mmNewsList: responseData.entity.resultList};
              this.setState({
                loading: false,
                success: true,
                
                list: this.weekList,
              })

            });
          // }else{
          //   this.setState({
          //     loading: false,
          //     success: true,
          //     today: false,
          //     yesterday: false,
          //     week: true,
          //     history: false,
          //     currentStatus: "week",
          //     list: this.weekList,
          //   })
          // }
          break;
        case "history":
          this.setState({
            today: false,
            yesterday: false,
            week: false,
            history: true,
            currentStatus: "history",
          });
          // if(!this.historyList.mmNewsList){
            //请求数据的列表 即this.hoursPosList = ?
            // https://api.media-plus.cn/billboard/detailExtra
            this.fetchData(1,(responseData) => {
              this.historyList = {mmNewsList: responseData.entity.resultList};
              this.setState({
                loading: false,
                success: true,
                list: this.historyList,
              })

            });
          // }else{
          //   this.setState({
          //     loading: false,
          //     success: true,
          //     today: false,
          //     yesterday: false,
          //     week: false,
          //     history: true,
          //     currentStatus: "history",
          //     list: this.historyList,
          //   })
          // }
          break;
      }
    // },2000);
  };
  render() {
    var data = this.props.did;
    return (
      <View style={{flex: 1,backgroundColor: '#f6f6f6'}}>
        <ToolbarComponent
          leftItem={{
            title: 'Back',
            layout: 'icon',
            icon: require("../../images/back.png"),
            onPress: () => {
               Common.onBack(this);
            },
          }}
          // extraItem={{
          //   title: 'Collection',
          //   layout: 'icon',
          //   icon: collectionIcon,
          //   onPress: () => {
          //     if(this.state.isCollection){
          //       Common.deleteCollection({id: this.props.did, type: this.state.source.type},() => {
          //         this.setState({isCollection: false});
          //       });
          //     }else{
          //       Common.addCollection({id: this.props.did, type: this.state.source.type},() => {
          //         this.setState({isCollection: true});
          //       });
          //     }
          //   },
          // }}
          // rightItem={{
          //   title: 'Share',
          //   layout: 'icon',
          //   icon: require("../../images/share/share.png"),
          //   onPress: () => {
          //     if(this.refs.share){
          //       this.refs.share.show(this.location, this.state.source.id);
          //     }
          //   },
          // }}
        >
          <View style={stylesm.toolbarV}>
            <Text style={stylesm.toolbarT} numberOfLines={1}>媒体监测库</Text>
          </View>
        </ToolbarComponent>
        <View style={{flex: 1}}>
          <View style={[styles.reportTitle,{paddingHorizontal: 0,backgroundColor: '#fffdfe'}]}>
            <TouchableOpacity onPress={() => {this.switchTab("today")}} style={[styles.reportTitleW, this.state.today?stylesm.borderStyle:null]}>
              <Text style={styles.reportTitleN}>{Common.toTransformation(data.mmCurrentReportCount).value}<Text style={styles.unitF}>{Common.toTransformation(data.mmCurrentReportCount).unit}</Text></Text>
              <View style={styles.reportTitleL}>
                <Text style={styles.reportTitleText}>今日</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("yesterday")}} style={[styles.reportTitleW, this.state.yesterday?stylesm.borderStyle:null]}>
              <Text style={styles.reportTitleN}>{Common.toTransformation(data.mmYesterdayReportCount).value}<Text style={styles.unitF}>{Common.toTransformation(data.mmYesterdayReportCount).unit}</Text></Text>
              <View style={styles.reportTitleL}>
                <Text style={styles.reportTitleText}>48小时</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("week")}} style={[styles.reportTitleW, this.state.week?stylesm.borderStyle:null]}>
              <Text style={styles.reportTitleN}>{Common.toTransformation(data.mmOther1ReportCount).value}<Text style={styles.unitF}>{Common.toTransformation(data.mmOther1ReportCount).unit}</Text></Text>
              <View style={styles.reportTitleL}>
                <Text style={styles.reportTitleText}>七日</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {this.switchTab("history")}} style={[styles.reportTitleW, this.state.history?stylesm.borderStyle:null]}>
              <Text style={styles.reportTitleN}>{Common.toTransformation(data.mmTotalReportCount).value}<Text style={styles.unitF}>{Common.toTransformation(data.mmTotalReportCount).unit}</Text></Text>
              <View style={styles.reportTitleL}>
                <Text style={styles.reportTitleText}>历史总</Text>
                <Text style={styles.reportTitleText}>报道量</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={{flex: 1}}>
          {
            (this.state.loading?
              <Loading />:
              (this.state.success?
                <View style={{backgroundColor: '#fff'}}>
                  <IndustryMediaList data={this.state.list} {...this.props}/>
                </View>
                  :
                <LoadError reload={() => this.switchTab(this.state.currentStatus)} reason={this.state.errorMessage}/>))
          }
          </View>
        </View>
      </View>
    )
  }
}
const stylesm = StyleSheet.create({
  toolbarV: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarT: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 20
  },
  borderStyle: {
    borderBottomColor: '#ff4948', borderBottomWidth: 2/PixelRatio.get()
  }
});
